<template>
  <div id="config-page">
    <g-banner title="外部配置项" des="无需更改源代码，用户可自由配置相关选项"></g-banner>
    <div class="g-title-con">
      <h2 class="g-main-title">外部配置项</h2>
    </div>
    <div class="g-box" style="padding: 30px">
      <article>
        <!-- <div class="g-form-title">对于用户</div> -->
        <p>为了方便开发人员、实施人员和用户能够客制化配置一些功能，我们为本工程设计了一个配置文件，<code>/static/general.config.js</code>。</p>
        <img src="@/assets/img/config2.jpg">
        <p>文件内容如下：</p>
        <codemirror v-model="code" :options="cmOptions" ref="cm"></codemirror>
        <p>按照规定设置相应的参数后，即可产生效果。</p>
        <p>以“门户集成”为例，我们将<code>hasLayout: false,</code>，即将文件改成：</p>
        <codemirror v-model="code2" :options="cmOptions" ref="cm"></codemirror>
        <p>项目的侧边栏和头部就消失了。</p>
        <img src="@/assets/img/no-layout.jpg">
        <p>该配置文件打包后会被放在<code>/dist/grp_config/general.config.js</code>中。</p>
        <img src="@/assets/img/config.jpg">
        <p>在服务器端修改该配置文件，无需重启nginx，刷新页面后同样有效。</p>
        <p>在<code>kubesphere</code>中，可以将其作为<code>config map</code>挂载出来。</p>
      </article>
    </div>
  </div>
</template>
<script>
import { codemirror } from 'vue-codemirror'
// 引入相关资源
import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/theme/eclipse.css'
export default {
  data() {
    return {
      code: 
`var generalConfig =  {
   hasLayout: true, // 是否显示基础布局（头部、侧边栏等），默认为显示（true）
   hasSupportTip: true, // 是否显示技术支持信息，默认为显示（true）
   hasToggleAnimation: true, // 是否播放切换动画，默认播放（true）
}`,
      code2: 
`var generalConfig =  {
   hasLayout: false, // 是否显示基础布局（头部、侧边栏等），默认为显示（true）
   hasSupportTip: true, // 是否显示技术支持信息，默认为显示（true）
   hasToggleAnimation: true, // 是否播放切换动画，默认播放（true）
}`,
      cmOptions: {
        tabSize: 4,
        mode: 'text/javascript',
        theme: 'eclipse',
        lineNumbers: true,
        line: true,
        readOnly: 'nocursor'
      }
    }
  },
  mounted() {
    console.log(this.$refs.cm.codemirror)
  },
  components: {
    codemirror
  }
}
</script>
<style lang="scss" scoped>
article {
  width: 60%;
  margin: auto;
}
p {
  margin: 0.5em 0;
}
code {
  font-family: 'Courier New', Courier, monospace;
  margin: 0 5px;
  padding: 0 5px;
  vertical-align: middle;
  background-color: #eeeeee;
  display: inline-block;
  border: 1px solid #cccccc;
  border-radius: 2px;
}
img, /deep/ .CodeMirror {
  margin: 10px 0;
}
/deep/ .CodeMirror {
  height: auto;
  font-family: 'Courier New';
  line-height: 20px;
}
@media (max-width: 1400px) {
  article {
    width: 90%;
    margin: auto;
  }
}
</style>